<template>
    <div class="login-box">
        <h2 class="title-text">智慧社区管理系统</h2>
        <Form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
            <FormItem prop="username">
                <Input type="text"  placeholder="用户名" size="large" v-model="loginForm.username">
                    <Icon type="ios-person-outline" slot="prepend" size="22"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" placeholder="密码" size="large" v-model="loginForm.password">
                    <Icon type="ios-lock-outline" slot="prepend" size="22"></Icon>
                </Input>
            </FormItem>
            <FormItem class="btns">
                <Button type="primary" size="large" class="btn" @click="login">登录</Button>
                <Button type="success" size="large" class="btn" @click="resetLoginForm">重置</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            loginForm: {
                username:'',
                password:''
            },
            //校验规则
            loginFormRules: {
                username:[
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        if(window.TencentCaptcha === undefined){
            let script = document.createElement('script')
            let head = document.getElementsByTagName('head')[0]
            script.type = 'text/javascript'
            script.src = 'https://ssl.captcha.qq.com/TCaptcha.js'
            head.appendChild(script)
        }
    },
    methods: {
        //重置表单
        resetLoginForm() {
            //console.log(this)
            this.$refs.loginFormRef.resetFields();
        },
        login() {
            this.$refs.loginFormRef.validate(valid => {
                if(!valid) return;
                let captcha = new TencentCaptcha(
                    '2067532507',
                    async captchaResult => {
                        // console.log(captchaResult)
                        if(captchaResult.ret === 0){
                            const {data:res1} = await this.$http.get(`/captcha/verify/${captchaResult.ticket}/${captchaResult.randstr}`)
                            // console.log(res1)
                            if(res1.errorCode !== 200) return this.$message.error('验证失败')
                            else{
                                const {data:res2} = await this.$http.post('/admin/login', this.$qs.stringify(this.loginForm));
                                //设置token，保存登录状态
                                window.sessionStorage.setItem('token', res2.data)
                                if(res2.errorCode !== 200) return this.$message.error(res2.errorMsg)
                                this.$router.push('/home')
                                return this.$message.success('登陆成功')
                            }
                        }else if(captchaResult.ret === 2)this.$message.warning('验证取消')
                    }
                );
                captcha.show()          
            })    
        }
    }
}
</script>

<style scoped>
.title-text{
    position: relative;
    top: 20px;
    color: teal;
}
.login-form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login-box{
    width: 450px;
    height: 260px;
    border-radius: 3px;
    background-color: #79767673;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.btn{
    margin: 0 10px;
}
</style>>
